<template>
    <div class="account-record page">
        <div class="con">
            <div class="filter">
                <!--                <div class="time">2019年10月</div>-->
                <!--                <div class="detail"><span class="amount">支出 ¥2003.00 收入 ¥3500.00</span><span class="more">月账单 ></span></div>-->
                <div class="detail"><span class="amount">当前{{records.length}}条记录 共支出 ¥{{totalDe}}  收入 ¥{{totalIn}}</span><span class="more" @click="showDefault">{{accountTypeOptions[type].content}}</span>
                </div>

            </div>
            <cube-scroll @pulling-down="pullDownRefresh" @pulling-up="pullUpLoad" ref="scroll" :options="options" :data="records">
                <div class="items">
                    <div class="item" v-for="(item,index) in records" :key="index" @click="turn(item.info)">
                        <img :src="item.otherUser.avatar" alt="" class="avatar">
                        <div class="right border-bottom-1px">
                            <div class="info border-bottom-1px">
                                <span class="remark">{{item.info}}</span>
                                <span class="time">{{parseTime(item.time)}}</span>
                            </div>
                            <span class="amount" :class="{add:item.amount>0}">{{item.amount>0?'+ ':''}}{{item.amount}}</span>
                        </div>
                    </div>
                </div>
            </cube-scroll>

        </div>
    </div>
</template>

<script>
    import {record,confirm} from "../../api/account";
    import {getUserId} from "../../util/cookie";
    import {parseTime} from "../../common/js/time";
    import {mapState} from 'vuex'
    export default {
        activated() {

            if(this.$route.query.type!=null){
                this.type = this.$route.query.type
            }

            this.pullDownRefresh()
            this.$nextTick(()=>{
                this.$refs.scroll.refresh()
            })
        },
        created() {

        },
        methods: {
            showDefault() {
                this.$createActionSheet({
                    title: '选择类别',
                    data:this.accountTypeOptions,
                    onSelect: (item, index) => {
                        this.type = index
                        this.pullDownRefresh()
                    }
                }).show()
            },
            turn(info){
                // console.log(id);
                this.$router.push({
                    path:`/order/detail?info=${info}`
                })
            },
            parseTime(time){
              return parseTime(time)
            },
            getList() {
                record(this.type,this.page).then(res => {
                    this.records = this.records.concat(this.initRecords(res.data))
                    this.page  = this.page + 1
                })
            },
            pullDownRefresh() {
                this.page = 1
                this.records = []
                this.totalDe =0
                this.totalIn=0
                this.getList(this.page)

            },
            pullUpLoad() {

                this.getList(this.page)
            },
            initRecords(records){
                return records.map(record => {

                    let temp = record.record


                    let userId = this.userId
                    temp.user = record.toUser
                    temp.otherUser = record.fromUser
                    //自己是转出方
                    if (record.fromUser.id == userId) {
                        temp.amount = -temp.amount
                        temp.user = record.fromUser
                        temp.otherUser = record.toUser
                    }
                    let txt = '转给'
                    if(temp.amount>0){
                        txt = '来自'
                        this.totalIn += temp.amount
                    }else {
                        this.totalDe -=temp.amount
                    }
                    txt += temp.otherUser.name

                    if(temp.info){
                        temp.info = txt+'-'+temp.info
                    }else {
                        temp.info = txt
                    }

                    return temp
                })
            }
        },
        computed: {
            ...mapState({
                "userId":state=>state.user.user.userId
            })
        },
        data() {
            return {
                type:0,
                accountTypeOptions:[{content:"现金券"},{content:"积分数"},{content:"优惠券"}],
                totalIn:0,
                totalDe:0,
                page: 1,
                options: {
                    pullDownRefresh: {
                        txt: ' '
                    },
                    pullUpLoad: true,
                },
                records: []
            }
        }
    }
</script>

<style scoped lang="stylus">
    .account-record
        background url("~@/assets/hbg.png") no-repeat $page-bg
        background-size 100% auto
        z-index 2
        height 100%

        .con
            height 100%
            padding 10px 10px 10px
            padding-bottom 50px

            .filter
                background-color white
                height 65px
                display flex
                flex-direction column
                justify-content center
                padding 0 15px

                .time
                    font-size: 14px;
                    font-family: PingFang SC;
                    font-weight: 300;
                    margin-bottom 5px
                    color: rgba(78, 61, 7, 1);

                .detail
                    font-size: 11px;
                    font-family: PingFang SC;
                    font-weight: 300;
                    color: rgba(111, 111, 111, 1)

                    .more
                        float right

            .items
                padding-bottom 10px
                margin-top 5px
                background-color white

                .item
                    display flex
                    align-items center
                    height 63px

                    .avatar
                        border-radius 50%
                        width 36px
                        height 36px
                        margin 0 10px 0 15px
                        flex 0 0 36px

                    .right
                        flex 1
                        height 100%
                        display flex
                        align-items center
                        min-width 0
                        .info
                            border-bottom-color #DCDCDC
                            height 100%
                            flex 1
                            display flex
                            justify-content center
                            flex-direction column
                            min-width 0
                            .remark
                                font-size: 13px;
                                line-height 17px
                                font-family: PingFang SC;
                                font-weight: 300;
                                color: rgba(78, 61, 7, 1);
                                margin-bottom 8px
                                text-overflow ellipsis
                                overflow hidden
                                white-space nowrap
                            .time
                                font-size: 11px;
                                font-family: PingFang SC;
                                font-weight: 300;
                                color: rgba(161, 161, 161, 1);

                        .amount
                            height 100%
                            display flex
                            align-items center
                            justify-content center
                            border-bottom-color #DCDCDC
                            flex 0 0 75px
                            font-size: 14px;
                            font-family: PingFang SC;
                            color #4E3D07
                            &.add
                                color #F7895E


</style>